<template>
	<div>
		<div class="list" ref="list">
			<div class="item" v-for="(item,index) in joks" :key="index">
				<h3>{{item.title}}</h3>
				<p>{{item.summary}}</p>				
			</div>
		</div>
	</div>
</template>
<script>
	import waterFall from '@/utils/waterFall.js' 
	export default {
		data(){
			return {
				joks:[],
				page:1,
				flag:true,
			}
		},
		created(){
			this.getJok();
		},
		methods:{
			getJok(){
				this.flag = false;
				// 使用全局方法
				this.$request.get("http://520mg.com/mi/list.php?page="+this.page)
				.then(res=>{
					this.joks = this.joks.concat(res.data.result)
					this.flag = true;
					this.page++;
					// 等待dom渲染后在执行waterfall
					this.$nextTick(()=>{
						// this.waterFall(2,10,this.$refs.list);
						// this.waterFall(3,5);
						waterFall(".item",2,10);
					})
				})
			},
			
		}
	}
	
</script>

<style>
.item{
	border:1px solid #ccc;
	background-color: #fff;
	padding: .15rem;
	
}
.list{
	height:200px;
	overflow: auto;
}
</style>